iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 15
0

前言

Web 應用程式佔客戶端 JavaScript 的比重越來越高,增加了使用 JavaScript 開發大型程式的機會。這意味者,開發者不能只是寫完程式就覺得:『好了,完成了!』伴隨開發完成而來的,是應用程式運作中將出現的錯誤修正、功能新增 / 更新等常態性的變更。
再變更程式時,首要任務就是『了解程式!』此時『閱讀』程式,可能比『寫』程式還更花時間:經過一段時間後,回頭再看自己寫的程式,可能都需要花時間回想,若是看他人的程式,當然需要更多時間了解。因此,撰寫漂亮 (易於閱讀) 的程式是很重要的。
何謂『最漂亮』的程式? 這概念可能過於抽象,其實只要遵循所謂程式設計規範,即可達成。程式設計規範從變數的命名規則、附加空白、縮排到註解的撰寫方法…等,都有統一的規則。遵循這些規則,就可達到維持程式『不骯髒』的最低限度目標。

JavaScript style guide (MDN) 的主要規範

下面列舉幾個『JavaScript style guide (MDN)』中的重要規範。要特別注意的是,此處的重點是『規範』而不是『語法規則』。

基本:

  1. 單行程式應不超過 80 個字元
  2. 於文件結尾處要換行
  3. 逗號 / 分號後要有空白
  4. 函數、物件等定義區塊前後應有空行

空白:

  1. 以 2 個空白表示縮排 (不使用 Tab)
  2. 使用空白區隔 2 個運算字
  3. 逗號 / 分號與關鍵字後,應有空白 (若在行尾則不用)

命名規則:

  1. 變數 / 函數名稱以開頭小寫英文的 cameClass 格式命名
  2. 常數名稱以整體大寫與下底線的格式命名
  3. 建構子 / 類別名稱以開頭大寫英文的 cameClass 格式命名
  4. 私有變數以『 _ 』開頭
  5. 事件處理函數以『 on 』開頭

其它:

  1. 所有變數都要宣告與初始化
  2. 不可重複宣告變數
  3. 建立陣列、物件時,以 […]、{…} 等常值語法宣告
  4. 不要比較布林值與 true / false

『 Google JavaScript Style Guide 』中有些規範與上面提及的部分重複,以下列出除前述之外,比較重要的項目。

  1. .js 檔案名稱一律小寫
  2. 不要省略分號
  3. 『’』較『”』優先使用
  4. 不使用基本資料型態 (string、number、boolean 等) 的包裹物件
  5. 利用命名空間以最小化全域層級的名稱
  6. 表示區塊 {…} 的前面不換行
  7. 不要複寫內建物件的 prototype
  8. 不要使用 with / eval 指令
  9. for…in 指令只用於關聯陣列 / 雜湊

上述規範不只能讓程式較容易閱讀,更必須遵循以撰寫『安全』的程式碼。


上一篇
[Day - 14] JavaScript ES6 學習筆記 (四)
下一篇
[Day - 16] React 學習筆記 (一)
系列文
為自己而寫,前端工程師之 30 天心得分享30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言